<template>
  <div class="serch-main">
    <!-- navbar 导航栏 通过组件的方式封装后使用-->
    <Navbar :title="navbarTitle"/>

    <!-- 搜索栏 -->
    <div class="searchbox">
      <form action="/">
        <van-search  v-model="keywords" show-action placeholder="商品搜索" @input="doKeywordsSearch" @cancel="onCancel" />
      </form>
      <div class="historyRecord">
        <div class="historyText">
          <span>历史记录</span>
          <van-icon name="delete" size="16" />
        </div>
        <div class="historyDetail"></div>
      </div>
    </div>
  </div>
</template>

<script>
import searchApi from "@/api/search/index";
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
// 引入Navbar组件
import Navbar from '@/components/Navbar'
export default {
  name: "search",
  components:{
    Navbar
  },
  data() {
    return {
      navbarTitle:'搜索',
      keywords:'',
    };
  },
  created() {
    this.gethistory()
  },
  methods: {
    doKeywordsSearch() {
      searchApi.helperaction({
         keyword:this.keywords,
      })
      .then(res=>{
        this.helperaction=res
      })  
    },
    onCancel() {
      this.$router.go(-1);
    },
    gethistory(){
      
    }
  },
};
</script>
<style lang='scss' scoped>
.serch-main {
  .searchbox {
    margin-top: 2px;
    background-color: $bagColor;
    .historyRecord {
      .historyText {
        display: flex;
        justify-content: space-between;
        margin: 17px;
        .van-icon-delete::before {
          vertical-align: middle;
        }
      }
    }
  }
}
</style>